<template>
  <el-configProvider :locale="{ ...zhCn, ...plusZhCn }">
    <n-configProvider
      :theme="theme"
      :theme-overrides="themeOverrides"
      class="h-full"
    >
      <router-view />
    </n-configProvider>
  </el-configProvider>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { darkTheme } from "naive-ui";
import { useGlobal, lighten } from "@pureadmin/utils";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import plusZhCn from "plus-pro-components/es/locale/lang/zh-cn";
import naiveThemeCommon from "@/config/naive-var";
import { storeToRefs } from "pinia";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { useLunchStoreHook } from "@/store/modules/lunch";

defineOptions({
  name: "app"
});

const { isDarkMode } = storeToRefs(useEpThemeStoreHook());

// 计算：当前主题
const theme = computed(() => {
  return isDarkMode.value ? darkTheme : null;
});

// 计算：主题颜色
const themeOverrides = computed(() => {
  const { $config } = useGlobal<GlobalPropertiesApi>();
  return {
    common: {
      primaryColor: $config.EpThemeColor,
      primaryColorHover: lighten($config.EpThemeColor, 0.3),
      primaryColorPressed: lighten($config.EpThemeColor, 0.2),
      primaryColorSuppl: lighten($config.EpThemeColor, 0.3),
      ...naiveThemeCommon
    }
  };
});

onMounted(() => {
  useLunchStoreHook().init();
});
</script>
